.launchpad {
  position: fixed;
  inset: 0;
  z-index: 99900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -100px;
  color: white;
  backdrop-filter: blur(100px);

  .body {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;

    .header {
      position: absolute;
      top: 124px;
      left: 50%;
      z-index: 2;
      padding: 16px;
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      text-align: center;
      transform: translateX(-50%);
    }

    .launchpad-app {
      position: fixed;
      right: 5%;
      left: 10%;
      display: flex;
      flex-flow: row wrap;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 100px;

      .app-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        text-align: center;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 20%;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-radius: 10px;
        }

        .iconfont {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 144px;
          height: 144px;
          padding: 16px;
          font-size: 96px;
          border-radius: 10px;
        }

        .title {
          margin-top: 5px;
          overflow: hidden;
          font-size: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .footer {
    bottom: 0;
    z-index: 100;
    display: flex;
  }
}
